<template>
  <div class="LanMu">
    <!-- 顶部 -->
    <div class="guanli">栏目管理</div>
    <!-- content部分 -->
    <div class="LanMuContent">
      <div class="name">栏目列表</div>
      <!-- 按钮 -->
      <div class="button">
        <el-button type="primary" :icon="Plus">添加</el-button>
        <el-button type="primary" :icon="Delete" color="red">删除</el-button>
      </div>

      <!-- ---- -->
      <div class="tip">
        <el-icon color="blue">
          <WarningFilled />
        </el-icon>已选择
        <span>4</span>项，可以进行批量操作
      </div>

      <!-- 列表 -->
      <div class="Content">
        <el-table :data="tableData.list" style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="title" label="栏目名称" width="180" backgroundColor="#ccc" />
          <el-table-column prop="id" label="栏目顺序" width="180" />
          <el-table-column prop="string" label="栏目描述" width="300" />
          <el-table-column prop="kaiguan" label="是否启用" width="180">
            <el-switch v-model="value1" />
          </el-table-column>

          <el-table-column prop="do" label="操作">
            <template #default="scope">
              <el-button link type="primary" size="small" @click.prevent="editRow(scope.row)">编辑</el-button>
              <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup >
// import LanMuEdit from "@/components/zhangwei/LanMuEdit.vue";

import { lanmu_list, lanmu_listdelete } from "@/axios/api.js";

import { onMounted, reactive, ref, computed } from "vue";
import { RouterLink, RouterView } from "vue-router";
import { useRouter } from "vue-router";

import { Plus, Delete, WarningFilled } from "@element-plus/icons-vue";

const value1 = ref(true);

//定义响应式数据
//栏目列表渲染数据
var tableData = reactive({ list: [] });
//栏目列表编辑数据
var editlist = reactive({});

//列表渲染发请求
onMounted(() => {
  lanmu_list()
    .then(res => {
      // console.log(res.data);
      tableData.list = res.data.list;
      // console.log(tableData.list.length);
    })
    .catch(e => {});
});

//定义函数，删除

//删除发请求
var deleteRow = row => {
  lanmu_listdelete({ id: row.id }).then(res => {
    console.log(row.id);
    tableData.list = res.data.list;
  });
};

// 编辑页面的跳转

var router = useRouter();
var editRow = row => {
  editlist = row;
  console.log(editlist);
  router.push({
    path: "/maxindex/LanMu/LanMuEdit",
    query: { id: JSON.stringify(row) }
  });
};

// 定义计算属性
// var checked = computed(() => {
//   var arr = tableData.value.findindex(item => {
//     return item.status == false;
//   });
//   return arr.length;
// });
</script>

<style lang="scss" scoped>
.LanMu {
  width: 100%;
  // background-color: #ccc;
  font-size: 14px;

  .guanli {
    width: 100%;
    font-family: "Arial Negreta", "Arial Normal", "Arial";
    font-weight: bolder;
    font-style: normal;
    font-size: 20px;
    padding: 10px 0;
    // background-color: #eee;
    border-bottom: 1px solid #ccc;

    // position: fixed;
    // top: 60px;
  }
  .LanMuContent {
    margin-top: 20px;
    margin-left: 100px;

    .name {
      font-family: "Arial Negreta", "Arial Normal", "Arial";
      font-weight: 700;
      font-style: normal;
      font-size: 16px;
    }
    .button {
      margin-top: 20px;
    }
    .tip {
      margin-top: 20px;
    }
    .Content {
      margin-top: 20px;
    }
  }
}
</style>